<style>
body {
  min-width:220px;
  overflow-x:hidden;
  min-height: 50px;
}

img {
  margin:5px;
  border:2px solid black;
  vertical-align:middle;
  width:75px;
  height:75px;
}

label{
	background-color: #DDD;
	margin: -8px -8px 9px -8px;
	display: block;
	padding: 8px;
	font-family: Tahoma;
	font-size: 11px;
	text-shadow: 0 0 2px white;
	font-weight: bold;
}

#shortUrl{
	width: 167px;
}
</style>
<script src="js/config.js" type="text/javascript"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/api.js" type="text/javascript"></script>
<script>
    window.addEventListener("load", windowLoaded, false);
    function windowLoaded() {
      chrome.tabs.getSelected(null, function(tab) {
        document.getElementById('url').value = tab.url;
      });
	  document.getElementById('url').focus();
    }
	
	function saveUrl(){
		var bucket=BUCKET_NAME;
		var key=document.getElementById('shortUrl').value;
		var url=document.getElementById('url').value;
		if(key && url){
			api.nosql.set(bucket,key,url);
		}
		window.close();
	}
</script>
<label>ShortCode to associate with this Url</label>
<input id="shortUrl" />
<input type="hidden" id="url" value="" />
<input type="button" id="submit" value="Save" onClick="saveUrl()"/>